<template>
	<view class="unstacking-instore-main-page-content">
		<view class="top-view">
			<scan-input-form-item
				class="forma-item"
				label="托盘码"
				v-model="form.container"
				:msg="msg.container"
				:msg-type="msgType.container"
				@search="onSearchContainer"
				@clear="onClearContainer"
			/>
			<view class="btns-row">
				<view class="btn primary-btn" @tap.stop="onAdd">添加物料</view>
			</view>
		</view>
		<view class="list-view">
			<!-- ########### -->
			<view class="list-items-group">
				
				<view class="list-item" v-for="(item,index) in list" :key="'list-item-'+index">
					<uni-swipe-action-item :auto-close="false">
						<view class="list-item-show">
							<view class="item-left">
								<uni-badge :text="list.length-index" type="primary" size="normal" />
							</view>
							<view class="item-main">
								<view class="item-row">
									<view class="label">物料编号</view>
									<view class="content">{{item.materialNo}}</view>
								</view>
								<view class="item-row">
									<view class="label">图号</view>
									<view class="content">{{item.drawingNo}}</view>
								</view>
								<view class="item-row">
									<view class="label">船号</view>
									<view class="content">{{item.shipNo}}</view>
								</view>
								<view class="item-row">
									<view class="label">尺寸</text></view>
									<view class="content">{{item.long}}*{{item.wide}}*{{item.high}}</view>
								</view>
							</view>
						</view>
						<template v-slot:right>
							<view class="swipe-action-btns">
								<view class="swipe-action-btn" @tap.stop="onEdit(item,index)"><text>编辑</text></view>
								<view class="swipe-action-btn danger" @tap.stop="onDel(index)"><text>删除</text></view>
							</view>
						</template>
					</uni-swipe-action-item>
				</view>
							
			</view>
			<!-- ########### -->
		</view>
	</view>
</template>

<script>
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import { $alert, parseDic } from '@/static/js/utils/index.js'
const defaultForm = {
	container:''
}
export default {
	name:'unstackingInstoreMainPageContent',
	emits:['pageChange'],
	components:{ScanInputFormItem},
	data() {
		return {
			form: {...defaultForm},
			msg:{
				container:''
			},
			msgType:{
				container:'error'
			},
			list:[],
			container:null
		}
	},
	methods:{
		onSearchContainer(){
			if (!this.form.container) {
				this.msgType.container = 'error'
			  this.msg.container = '请输入托盘码！';
			  return false;
			}
			this.msg.container = '';
			this.getContainerInfo()
		},
		onClearContainer(){
			this.clearMain()
		},
		clearMain(){
			this.clearContainer()
			this.clearBackContainer()
		},
		clearContainer(){
			this.form.container = ''
			this.msg.container = ''
		},
		clearBackContainer(){
			this.container = null
			this.list = []
		},
		getContainerInfo(callback){
			const __setErrMessage = function(__msg) {
				if (!__msg) {
					__msg = '网络错误，请稍后再尝试！'
				}
				this.msgType.container = 'error'
				this.msg.container = __msg;
			}.bind(this)
			let params = {ContainerCode:this.form.container}
			this.$api.get('UnstackingGetContainer',params,{block:'unstacking',fullRes:true}).then((d)=>{
				if (d.data) {
					if (d.data.wmsContainer) {
						this.container = d.data.wmsContainer
						this.list = d.data.wmsMaterials || []
						let _temp1 = parseDic(this.$store,'container_status',this.container.containerStatus)
						this.msgType.container = 'info'
						this.msg.container = `尺寸：${this.container.specLength}*${this.container.specWidth}，状态：${_temp1}`
						callback && callback(true)
					} else {
						this.clearBackContainer()
						__setErrMessage(d.message)
						callback && callback(false)
					}
				} else {
					this.clearBackContainer()
					__setErrMessage(d.message)
					callback && callback(false)
				}
			}).catch((_errmsg)=>{
				this.clearBackContainer()
				__setErrMessage()
				callback && callback(false)
			})
		},
		onDel(index){
			this.list.splice(index,1)
		},
		onAdd(){
			this.$emit('pageChange',null)
		},
		onEdit(obj,index){
			this.$emit('pageChange',obj,index)
		},
		add(obj){
			this.list.unshift(obj)
		},
		modify(obj,index) {
			this.$set(this.list,index,obj)
		},
		getSubmitParams(){
			return {
				list:this.list,
				container:this.container
			}
		},
		checkConfirm(confirmType='confirm'){
			let res = {flag:true,data:{}}
			res.data = this.getSubmitParams()
			if (res.flag && res.data.list.length<=0) {
				$alert('请录入物料数据！')
				res.flag = false
			} 
			return res;
		},
	}
}
</script>

<style scoped lang="scss">
.unstacking-instore-main-page-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	&>.top-view{
		flex-shrink: 0;
	}
	&>.list-view{
		height: 1px;
		overflow: auto;
		flex-grow: 1;
		.list-items-group{
			padding-top:12rpx;
			.list-item {
				margin-bottom: 12rpx;
				border-width: 2rpx 0;
				border-style: solid;
				border-color: $uni-border-color;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		.list-item-show{
			background-color: $uni-bg-color;
			font-size: 1.1em;
			display: flex;
			&>.item-left{
				flex-shrink: 0;
				padding-left: 16rpx;
				padding-top: 12rpx;
				padding-right: 12rpx;
			}
			&>.item-main{
				flex-grow: 1;
				width: 1px;
				padding-right: 16rpx;
			}
			.item-row{
				border-bottom: 2rpx dashed $uni-text-color-grey;
				display: flex;
				&>.label{
					opacity: .7;
					flex-shrink: 0;
					width: 130rpx;
					padding-top: 11rpx;
					.first-label-inner{
						display: flex;
						align-items: center;
						.batch-no{
							margin-left: 8rpx;
						}
					}
				}
				&>.content{
					width: 1px;
					flex-grow: 1;
					line-height: 1.5em;
					padding: 8rpx 0;
				}
				&:last-child{
					border-bottom: 0;
				}
			}
		}
	}
	.forma-item{
		margin-bottom: 24rpx;
	}
	.btns-row{
		display: flex;
		height: 90rpx;
		box-sizing: border-box;
		border-style: solid;
		border-color: $uni-border-1;
		border-width: 2rpx 0 2rpx 0;
		.divider {
			width: 2rpx;
			height: 100%;
			background-color: $uni-border-1;
		}
		.btn{
			flex-grow: 1;
			width: 1px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			&.primary-btn{
				background-color: $uni-color-primary;
				color: $uni-bg-color;
			}
			&.default-btn{
				background-color: $uni-bg-color;
				color: $uni-color-primary;
			}
		}
	}
}
.swipe-action-btns{
	width: 100rpx;
	display: flex;
	flex-direction: column;
}
.swipe-action-btn{
	display: flex;
	color: $uni-bg-color;
	background-color: $u-primary;
	justify-content: center;
	align-items: center;
	height: 50%;
	width: 100rpx;
	box-sizing: border-box;
	&.danger{
		background-color: $u-error;
	}
}
</style>